import {
    G2,
    Chart,
    Geom,
    Axis,
    Tooltip,
} from "bizcharts";


class PriceTrendChart extends React.Component {
    
    constructor(){
        super()
        this.state={}
        
    }

    componentDidMount() {
        
    }


    getPriceDirection(_priceDirection){
        let priceDirection=_priceDirection
        if(_priceDirection.length==1){
            let price=_priceDirection[0].price
            let originMonth=_priceDirection[0].date.split('-')[1]-0
            let originDate=_priceDirection[0].date.split('-')[2]-0
            let originFullyear=_priceDirection[0].date.split('-')[0]-0

            let originFullyear_1=originFullyear
            let originFullyear_2=originFullyear
            let originFullyear_3=originFullyear
            if(originMonth-1<=0){
                originFullyear_1=originFullyear-1
                originFullyear_2=originFullyear_1
                originFullyear_3=originFullyear_1
            }
            else if(originMonth-2<=0){
                originFullyear_2=originFullyear-1
                originFullyear_3=originFullyear-1
            }
            else if(originMonth-3<=0){
                originFullyear_3=originFullyear-1
            }

            priceDirection.push({
                price,
                date:`${originFullyear_3}-${originMonth-3}-${originDate}`
            })
            priceDirection.push({
                price,
                date:`${originFullyear_2}-${originMonth-2}-${originDate}`
            })
            priceDirection.push({
                price,
                date:`${originFullyear_1}-${originMonth-1}-${originDate}`
            })
        }
        return priceDirection
    }

    getMaxPrice(_priceDirection){
        let maxPrice=0
        _priceDirection.forEach((item,index)=>{
            if(index==0){
                maxPrice=item.price-0
            }
            else{
                let itemPrice=item.price-0
                if(itemPrice>maxPrice){
                    maxPrice=itemPrice
                }
            }
        })
        return maxPrice
    }
    
    render() {
        const {product}=this.props

        let _priceDirection=product.priceDirection

        let priceDirection=this.getPriceDirection(_priceDirection)
        let maxPrice=this.getMaxPrice(_priceDirection)

        const cols = {
            price: {
                min: 0,
                max:(maxPrice*1.1)-0
            },
            date: {
                // range: [1,2],
                // tickCount: 10,
            }
        };

        const label = {
            textStyle: {
                textAlign:_priceDirection&&_priceDirection.length==2? 'end':'center', // 文本对齐方向，可取值为： start center end
            }
        }

        return (
            <div style={{marginTop:50,}}>
                <Chart
                    width={950}
                    height={400}
                    data={priceDirection}
                    scale={cols}
                >
                    <Axis name="date"  label={label} />
                    <Axis name="price"  />
                    <Tooltip
                        crosshairs={{
                            type: "y"
                        }}
                    />
                    <Geom type="line" position="date*price" size={2} />
                    <Geom
                        type="point"
                        position="date*price"
                        size={4}
                        shape={"circle"}
                        style={{
                            stroke: "#fff",
                            lineWidth: 1
                        }}
                    />
                </Chart>
            </div>
        );
    }
}

export default PriceTrendChart;